<template>
	<view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'">
		<view class="warp">
			<c-gap height="80rpx" />
			<view class="nav-bar banxin">
				<!-- <view><uni-icons type="back" size="24" color="#fff" @tap="back"></uni-icons></view> -->
				<view class="title">登录</view>
			</view>
			<view class="form-box">

				<view class="item">
					<view>
						<text class="item-name">手机号</text>
					</view>
					<view class="input">
						<!-- maxlength="11" -->
						<input type="number" placeholder="请输入手机号" v-model="formData.loginname"  />
					</view>
				</view>

				<c-gap height="24rpx" />
				<view class="item">
					<view>
						<text class="item-name">密码</text>
					</view>
					<view class="input">
						<view>
							<input type="text" placeholder="请输入密码" v-model="formData.password" v-if="show_pass" />
							<input type="password" placeholder="请输入密码" v-model="formData.password" v-else />
						</view>
						<view>
							<image :src="$c.config.media + 'mini/lock2.png'" class="icon" v-if="show_pass" />
							<image :src="$c.config.media + 'mini/look1.png'" class="icon" v-else />
						</view>
					</view>
				</view>
				<c-gap height="10rpx" />
				<view class="pro">
					<view></view>
					<view @tap="$c.jump('/pages/index/forget')">忘记密码？</view>
				</view>
				<c-gap height="36rpx" />
				<view class="login-agreement">

					<view :class="['icon', checked ? 'icon-tubiao-danxuandianji' : 'icon-danxuan'] " @tap.stop="change">
					</view>我已阅读并同意<text @tap.stop="goAgreement">《用户协议》</text>
				</view>

				<view class="btn" @tap="submit">立即登陆</view>
				<c-gap height="30rpx" />
				<image :src="$c.config.media + 'mini/no-user.png'" class="no-user"></image>
			</view>
		</view>

		<c-gap height="54rpx" />
		<view class="to_reg" @tap="goRegister()">
			<view class="mid">
				<!-- 				<image :src="$c.config.media + 'mini/phone_icon.png'" class="regicon"></image> -->
				<text class="btn-text">还没有账号？点我注册</text>
			</view>
		</view>
		<c-gap height="30rpx" />

	</view>

</template>

<script>
	const app = getApp();
	// 按照自己的路径去引入,路径一定不要错
	import md5 from '@/utils/md5.js';

	import {
		genTestUserSig
	} from '../debug/GenerateTestUserSig.js';
	import CGap from '@/components/c-gap.vue';
	import {
		show,
		to
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				$c: this.$c,
				checked: false,
				type: 1,
				show_pass:false,
				formData: {
					loginname: '',
					code: '',
					password: ''
				}
			}
		},
		components: {
			CGap
		},
		onLoad() {},
		methods: {
			to,
			back() {
				to()
			},
			
			
			
			change(e) {
				this.checked = !this.checked
			},
			async sms() {
				let param = {
					loginname: this.formData.loginname,
					type: '2'
				};
				let res = await this.$c.post('/app/zhuce/sendCode', param)
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '短信已发送',
						duration: 1000,
						icon: 'none'
					});
				}
			},
			goAgreement() {
				uni.navigateTo({
					url: '/pages/m-pages/m-login/agreement'
				})
			},
			goRegister() {
				// uni.navigateTo({
				// 	url: '/pages/m-pages/m-login/register'
				// })
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			async getUserInfo() {
				// 是会员  或者 已经购买门票
				let res = await this.$c.post('/app/usermessage/getMessage')
				let userInfo = res.data
				uni.setStorageSync('userInfoID', userInfo.id);
				let userInfoID = uni.getStorageSync('userInfoID');
                 //2为未完成资料填写  1已完成
				if (userInfo.iswanshan == 2) {
					uni.navigateTo({
						url: '/pages/register/registers'
					})					
				} else {
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/m-pages/m-personnelList/index'
						});
					}, 1000);
				}
			},
			async loginTo() {
				let userID = this.username;
				let res = await this.$c.post('/app/login/login?loginname=' + this.formData.loginname +
					'&password=' + md5.hex_md5(this.formData.password) + '&loginType=' + this.type);
				if (res.code != 0) {
					this.$c.show(res.msg);
					return;
				}
				let token = res.data.token
				userID = res.data.user.tengxuncode.toString();
				const userSig = genTestUserSig(userID).userSig;
				uni.setStorageSync('token', res.data.token);
				app.globalData.userInfo = {
					token,
					userSig,
					userID
				};
				uni.setStorageSync('userInfo', app.globalData.userInfo);
				this.getUserInfo();
				// 登录腾讯im
				uni.$TUIKit
					.login({
						userID: userID,
						userSig: userSig
					})
					.then(res => {
						this.$store.commit('setToken', app.globalData.userInfo);
						uni.showToast({
							title: '登录中...',
							duration: 2000,
							icon: 'none'
						});
					})
					.catch((err) => {
					});
			},
			submit() {
				if (!this.checked) {
					uni.showToast({
						icon: "none",
						title: "请先同意用户协议"
					})
					return;
				}
				this.loginTo()
				// let formDataCheck = {
				// 	a: '请输入a',
				// 	b: '请输入b',
				// 	c: '请输入c',
				// 	d: '请输入d'
				// };
				// let data = {}
				// for (const key in this.formData) {
				// 	if (this.formData[key]) {
				// 		data[key] = this.formData[key]
				// 	} else {
				// 		return show(`请填写${formDataCheck[key]}`);
				// 		break;
				// 	}
				// }
				// console.log(data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		box-sizing: border-box;
		padding: 0 50rpx;
		width: 100%;
		height: 100vh;
		margin: 0 auto;
	}

	.top {
		position: absolute;
		top: 0;
		left: 40rpx;
		width: 100%;
		height: 100rpx;

		.top-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-bottom: 20rpx;
		color:#fff;
	}

	.form {
		width: 100%;

		.form-row {
			position: relative;
			width: 100%;
			height: 100rpx;
			margin-bottom: 20rpx;

			.form-row-title {
				width: 170rpx;
				line-height: 100rpx;
			}

			.form-row-input {
				height: 100%;

				input {
					width: 100%;
					height: 100%;
				}
			}

			.form-row-code {
				box-sizing: border-box;
				padding-left: 10rpx;
				line-height: 100rpx;
				color: #e6166a;
			}

			.m-line {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				right: 0;
			}
		}
	}

	.botton {
		width: 100%;
		margin-top: 140rpx;
		margin-bottom: 100rpx;

		.button {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx;
			text-align: center;
			line-height: 90rpx;
			background-color: #e6166a;
			margin-bottom: 20rpx;
		}

		.agreement {
			width: 100%;
			height: 50rpx;

			.checkbox {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #e6166a;
				margin-right: 20rpx;

				.checkbox-box {
					width: 40rpx;
					height: 40rpx;
					box-sizing: border-box;
				}
			}
		}

	}



	.content {
		width: 750rpx;
		min-height: 100vh;
		background: #120f24;
		background-size: 750rpx 100vh;
		//background-repeat: no-repeat;
		background-position: 0 0;

		.warp {
			width: 702rpx;
			margin: 0 auto;

			.nav-bar {
				display: flex;
				font-weight: 550;
				font-size: 34rpx;
				color: #fff;

				.title {
					width: 680rpx;
					text-align: center;
				}
			}


			.form-box {
				width: 694rpx;
				margin: 0 auto;

				.item {
					width: 694rpx;
					height: 194rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 24rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.item-name {

						height: 44rpx;
						font-size: 32rpx;

						font-weight: 600;
						color: #FFFFFF;
						line-height: 44rpx;
					}

					.input {

						margin-top: 10rpx;
						width: 654rpx;
						height: 90rpx;
						line-height: 90rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 8rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx;
						box-sizing: border-box;
						color: #FFFFFF;

						.icon {
							width: 50rpx;
							height: 30rpx;
						}

					}

				}

				.btn {
					width: 452rpx;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					border-radius: 100rpx;
					margin: 0 auto;
					background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
					font-size: 32rpx;
					font-weight: 550;
				}

				.pro {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #fff;
					font-size: 24rpx;
				}

				.login-agreement {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 26rpx;
					padding: 20rpx 22rpx;
					line-height: 36rpx;
					text-align: center;
					margin-top: 40rpx;

					.icon {
						font-size: 38rpx;
						color: #fff;
						margin-right: 8rpx;

						&.icon-tubiao-danxuandianji {
							color: #806EF9;
						}
					}

					text {
						color: #806EF9;
					}
				}

				.btn {
					width: 452rpx;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					border-radius: 100rpx;
					margin: 0 auto;
					background: linear-gradient(127deg, #FFF4DE 0%, #FFE6BA 100%, #FFE6BA 100%);
					font-size: 32rpx;
					font-weight: 550;
				}

				.no-user {
					width: 356rpx;
					height: 24rpx;
					display: block;
					margin: 0 auto;
				}

			}


		}

		.to_reg {
			border: 2rpx solid #fff;
			width: 670rpx;
			height: 108rpx;
			line-height: 108rpx;
			color: #fff;
			margin: 0 auto;
			border-radius: 40rpx;
			background: rgba(255, 255, 255, 0.1);

			.mid {
				width: 400rpx;
				margin: 0 auto;

				.icon {
					// background-color: #fff;
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}

				.btn-text {
					color: #fff;

					vertical-align: middle;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>